<template>
  <div class="detail-header">
    <el-page-header @back="onBack">
      <template #content>
        <div class="flex items-center">
          <el-avatar
            class="mr-3"
            :size="50"
            :src="event.background_image_url"
          />
          <span
            class="text-sm mr-2 club-name"
            style="color: var(--el-text-color-regular)"
          >
            {{ event.title }}
          </span>
        </div>
      </template>
      <el-descriptions :column="10" size="large" class="mt-4">
        <el-descriptions-item label="开始时间">{{
          formatUTC(event.start_date)
        }}</el-descriptions-item>
        <el-descriptions-item label="结束时间">{{
          formatUTC(event.end_date)
        }}</el-descriptions-item>
        <el-descriptions-item label="活动人数">{{
          event.registration_limit
        }}</el-descriptions-item>
        <el-descriptions-item label="报名人数">
          {{ event.registered_count }}
        </el-descriptions-item>
      </el-descriptions>
      <p class="mt-4 text-sm" v-html="event.description"></p>
    </el-page-header>
  </div>
  <div class="detail-content">
    <div class="content">
      <div class="header">
        <h3 class="title">报名用户</h3>
        <el-button type="primary" @click="handelPrint">导出excel</el-button>
      </div>

      <div class="table">
        <el-table
          :data="eventMemberList"
          max-height="800"
          border
          style="width: 100%"
          id="printable-table"
        >
          <el-table-column
            align="center"
            type="index"
            label="序号"
            width="60px"
          />

          <el-table-column
            align="center"
            label="用户名"
            prop="name"
            width="200px"
          />

          <el-table-column align="center" label="用户头像" prop="avatar_url">
            <template #default="scope">
              <img style="width: 50px" :src="scope.row.avatar_url" alt="" />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="联系电话"
            prop="contact_info"
            width="200px"
          />
          <el-table-column
            align="center"
            label="电子邮箱"
            prop="email"
            width="200px"
          />

          <el-table-column
            align="center"
            label="操作"
            width="200px"
            class="no-print"
          >
            <template #default="scope">
              <el-button
                size="small"
                icon="Delete"
                type="danger"
                text
                @click="deleteMember(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import * as XLSX from 'xlsx'
import { ElMessage, ElMessageBox } from 'element-plus'

import useEventStore from '@/store/main/event/event'
import type { IClubMember } from '@/store/main/club/type'
import { formatUTC } from '@/utils/format'

const route = useRoute()
const router = useRouter()
const eventStore = useEventStore()
// 获取传递过来的信息根据id查询
const { id } = route.query

fetchClubDeatilData()

const { event, eventMemberList } = storeToRefs(eventStore)
function fetchClubDeatilData() {
  eventStore.searchEventByIdAction(Number(id))
  eventStore.searchJoinUserAction(Number(id))
}
// 返回上一步
function onBack() {
  router.back()
}

function handelPrint() {
  // 假设我们只想导出前两列
  const columnsToExport = [
    { key: 'name', displayName: '用户名' },
    { key: 'contact_info', displayName: '联系电话' },
    { key: 'email', displayName: '电子邮件' }
  ] // 列的键名
  const dataToExport = eventMemberList.value.map((row: any) => {
    let newRow: any = {}
    columnsToExport.forEach((column) => {
      newRow[column.displayName] = row[column.key]
    })
    return newRow
  })
  const ws = XLSX.utils.json_to_sheet(dataToExport, {
    header: columnsToExport.map((column) => column.displayName), // 指定表头
    skipHeader: false // 不跳过表头
  })

  // 创建工作簿并添加工作表
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')

  // 定义文件名和导出
  const fileName = 'join.xlsx'
  XLSX.writeFile(wb, fileName)
}
// 判断是否同意
function deleteMember(scope: any) {
  ElMessageBox.confirm(`确认删除这个参与者吗`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await eventStore.cancelRegisterAction(Number(id), scope.user_id)
    ElMessage({
      type: 'success',
      message: '删除成功',
      duration: 1000
    })
  })
}
</script>

<style scoped lang="less">
.detail-header {
  background-color: #fff;
  padding: 20px;
  .club-name {
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: middle;
  }
}
.search {
  background-color: #fff;
  margin-top: 20px;

  .el-form-item {
    padding: 20px 30px;
    margin-bottom: 0;
  }

  .btns {
    text-align: right;
    padding: 0 50px 10px 0;

    .el-button {
      height: 36px;
    }
  }
}
.detail-content {
  .content {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;

    .title {
      font-size: 22px;
    }
  }

  .table {
    :deep(.el-table__cell) {
      padding: 12px 0;
    }

    .el-button {
      margin-left: 0;
      padding: 5px 8px;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
  }
}
</style>
